﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户管理</title>
    <link href="~/Content/jqueryeasyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/jqueryeasyui/themes/icon.css" rel="stylesheet" />
    <script src="~/Content/jqueryeasyui/jquery-1.8.0.min.js"></script>
    <script src="~/Content/jqueryeasyui/jquery.easyui.min.js"></script>
    <script src="~/Content/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/datapattern.js"></script>
    <script>
        $(function () {
            initTable();
            //bindRegisteButtonClickEvent();
            //修改用户代码
            //updateUser();
            BindUpdateUser();
            deleteuser();
            
        })
        function initTable() {
            $("#test").datagrid({
                url: '/user/getUser',
                title: "用户管理",
                iconCls: 'icon-save',
                //width: function(){return document.body.clientWidth*0.9;},
                //height: 550,
                //fit:true,
                height:($(window).height()*0.98) ,
                nowrap: true,
                autoRowHeight: false,
                fitColumns:true ,
                striped: true,
                collapsible: true,
                pagination: true,
                rownumbers: true,
                sortName: 'id',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'id',
                pageSize: 15,
                pageList: [15, 20, 30, 40, 50],
                striped: true, //奇偶行是否区分
                singleSelect: true,//单选模式
                rownumbers: true,//行号
          frozenColumns: [[
              { title: 'id', field: 'id', width: 50, sortable: true },
              { title: '用户名', field: 'Name', width: 100, sortable: false },
              { title: '出生日期', field: 'BronthDay', width: 150, sortable: true },
              { title: '地址', field: 'Address', width: 100, sortable: true }
          ]],
          toolbar: [//工具栏
              {
              id: 'btnadd',
              text: '添加',
              iconCls: 'icon-add',
              
              handler: function () {
                  $('#DivAddUser').dialog('open');//直接弹出添加窗口
              }
                }, {
              id: 'btncut',
              text: '修改',
             
              iconCls: 'icon-cut',
              handler: function () {
                  updateUser();//直接绑定弹出修改窗口事件
              }
                }, {
              id: 'btndelete',
              text: '删除',
              iconCls: 'icon-cancel',
          }],
            }
          )
        }
        $(function () {
            $(window).resize(function () {
                $('#test').datagrid('resize', {
                    width: $(window).width() - 10,
                    height: $(window).height() - 25
                }).datagrid('resize', {
                    width: $(window).width() - 10,
                    height: $(window).height() - 25
                });
            });

        });
        //添加事件
        $(function () {
            $("#btnRegist").click(function () {
                var validate = $("#ff").form('validate');
                if (validate == false) {
                    return false;
                }
                //获取参数传递给前台
                var postData = $("#ff").serializeArray();
                //发送异步请求到后台保存用户数据
                $.post("/User/addUser", postData, function (data) {
                    if (data = "OK") {
                        //添加成功  1.关闭弹出层，2.刷新DataGird
                        alert("添加成功");
                        $("#DivAddUser").dialog("close");
                        $("#test").datagrid("reload");
                        $("#ff").form("clear");
                    }
                    else {
                        alert("添加失败，请您检查");
                    }
                });
            });
        });
        //弹出修改框
        function updateUser(browse) {
            var rows = $("#test").datagrid("getSelections");
            if (rows.length != 1) {
                $.messager.alert("友情提示", "每次只能修改/浏览一条，你已经选择了<font color='red'  size='6'>" + rows.length + "</font>条", "error");
                return;
            }
            if (browse == null) {
                //处理修改的信息，弹出修改的对话框,然后显示选择的用户的详细信息
                $("#DivUpdateUser").dialog('open').dialog('setTitle', '用户修改信息');
                //绑定修改显示详细信息的方法
                BindShowUpdateUserInfo();
            }
            else {
                //处理浏览的信息，弹出浏览狂，然后显示浏览信息的相信信息
                $("#DivBrowerUser").dialog('open').dialog('setTitle', '用户浏览信息');
                //绑定用户的浏览信息
                BindBrowerUserInfo();
            }
        }
        //绑定弹出的修改界面
        function BindShowUpdateUserInfo() {
            //首先用户发送一个异步请求去后台实现方法
            var id = $("#test").datagrid("getSelections")[0].id;  //获取到了用用户选择的ID
            $.get("/User/GetUserInfos", { id: id }, function (userInfo) {
                $("#ID").val(userInfo.id);
                $("#NameU").val(userInfo.Name);
                $("#BronthDayU").datebox('setValue', (eval(userInfo.BronthDay.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")).pattern("yyyy-MM-dd hh:mm:ss")));
                $("#AddressU").val(userInfo.Address);
            });
        }
        //修改
        function BindUpdateUser() {
            $("#btnUpdate").click(function () {
                //首先也是对用户进行检测
                var validate = $("#ffUpdate").form("validate");
                if (validate == false) {
                    return false;
                }
                //构造参数发送给后台
                var posData = $("#ffupdate").serializeArray();
                $.get("/User/UpdateUserInfo", posData, function (date) {
                    if (date == "OK") {
                        //修改成功，关闭弹出层，刷新DataGird
                        alert("修改成功");
                        $("#DivUpdateUser").dialog('close');
                        $("#test").datagrid("reload");
                    }
                    else {
                        $.messager.alert("友情提示", "修改失败，请您检查");
                    }
                })
            });
        }
        //删除
        function deleteuser() {
            $("#btndelete").click(function () {
                var rows = $("#test").datagrid("getSelections");
                if (rows.length != 1) {
                    $.messager.alert("友情提示", "每次只能删除一条，你已经选择了<font color='red'  size='6'>" + rows.length + "</font>条", "error");
                    return;
                }
                $.messager.confirm("删除确认", "您确认删除?", function (r) {
                    if (r) {
                        var id = $("#test").datagrid("getSelections")[0].id;
                        $.post("/User/deleteUser", { id: id }, function (data) {
                            if (data == "OK") {
                                //修改成功，关闭弹出层，刷新DataGird
                                alert("删除成功！");
                                $("#DivUpdateUser").dialog('close');
                                $("#test").datagrid("reload");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败："+data);
                            }
                        })
                    }
                })
            });
        }
    </script>
</head>
<body>
    <div>
        <table id ="test" style="width: auto;height:400px "  title="用户操作" iconcls="icon-edit">

        </table>   
    </div>
    <!--------------------------添加用户信息的弹出层---------------------------->

    <div id="DivAddUser" class="easyui-dialog" title="添加用户" style="width:580px;height:180px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons">

        <form id="ff" method="post" novalidate="novalidate">
            <fieldset>
                <legend>必填信息</legend>
                <table id="tblAdd">
                    <tr>
                        <td><label for="Name">姓名：</label></td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="Name" name="Name" data-options="required:true,validType:'length[1,32]'" />
                        </td>
                        <td > <label for="BronthDay">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出生日期:</label></td>
                        <td>
                            <input type="text" name="BronthDay" class="easyui-datebox" required="required" style="width:154px" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Address">地址：</label></td>
                        <td>
                            <input type="text" name="Address" required="required" class="easyui-validatebox" />
                        </td>
                    </tr>
                    
                </table>
            </fieldset>
            <br />
             <a href="javascript:void(0)" class="easyui-linkbutton" id="btnRegist" iconcls="icon-ok">确定</a>
             <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#DivAddUser').dialog('close')">关闭</a>
        </form>
    </div>

    <div id="DivUpdateUser" class="easyui-dialog" title="修改用户" style="width:580px;height:230px;padding:10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons">

        <form id="ffupdate" method="post" novalidate="novalidate">
            <fieldset>
                <legend>必填信息</legend>
                <table id="tblAdd">
                    <tr>
                        <td><label for="Name">姓名：</label></td>
                        <td>
                            <input type="hidden" id="ID" name="ID" />
                            <input class="easyui-validatebox" type="text" id="NameU" name="Name" data-options="required:true,validType:'length[1,32]'" />
                        </td>
                        <td> <label for="BronthDay">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出生日期:</label></td>
                        <td>
                            <input type="text" name="BronthDay" id="BronthDayU" class="easyui-datebox" required="required" style="width:154px" />
                        </td>
                    </tr>
                    <tr>
                        <td><label for="Address">地址：</label></td>
                        <td>
                            <input type="text" name="Address" id="AddressU" required="required" class="easyui-validatebox" />
                        </td>
                    </tr>

                </table>
            </fieldset>
            <br />
           <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok">确定</a>
           <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#DivUpdateUser').dialog('close')">关闭</a>
        </form>
    </div>
</body>
</html>
